<template>
    <div class="wrapper main_wrap" ref="main">
        <page_header :content="content"></page_header>

        <el-card class="manage_card" ref="clue_card">

            <div class="manage_search" ref="manage_search">
                <div class="manage_search_item">
                    <el-select size="medium" style="width: 100%" v-model="search.shop" filterable placeholder="请选择门店"
                               ref="search"
                               @change="select_page()"
                               @hook:mounted="closeReadOnly('search')"
                               @visible-change="closeReadOnly('search')"
                    >
                        <el-option v-for="item in shop_list" :label="item.name" :value="item.seqId"
                                   :key="item.seqId"></el-option>
                    </el-select>
                </div>
                <div class="manage_search_item flexbettwen">
                    <el-input size="medium" v-model="search.keyword"
                              placeholder="请输入关键字搜索" clearable @clear="select_page()"></el-input>
                    <el-button plain type="primary" icon="el-icon-search" size="medium" @click="select_page"
                               style="padding-right: 10px;padding-left: 10px;margin-left: 20px">
                        搜索
                    </el-button>
                </div>
            </div>

            <div class="manage_list">


                <div class="table_title">
                    <span class="table_item title_item item_1th">姓名</span>
                    <span class="table_item title_item item_2th">销售</span>
                    <span class="table_item title_item item_3th">店长</span>
<!--                    <span class="title_item item_4th">店长</span>-->
                </div>

                <ul class="table_title table_list">
                    <li v-for="(item, index) in table_data" :key="index">
                        <span class="table_item list_item item_1th">{{item.name}}</span>
                        <span class="table_item list_item item_2th">
                            <el-switch
                                v-model="item.state"
                                active-color="#13ce66"
                                inactive-color="#9f9f9f"
                                @change="change_state(item)"
                            >
                            </el-switch>
                        </span>
                        <span class="table_item list_item item_3th">
                            <el-switch
                                v-model="item.state"
                                active-color="#13ce66"
                                inactive-color="#9f9f9f"
                                @change="change_state(item)"
                            >
                            </el-switch>
                        </span>
                    </li>
                </ul>
            </div>

        </el-card>

    </div>
</template>

<script>
    import page_header from "../../components/page_header";
    import pagination from "../../components/pagination";
    import lib_clue_autoshow from "../../libs/clue/lib_clue_autoshow"
    import _config from "../../common/_config";
    import table_list from "../../components/table_list";
    import api_user from "../../api/api_user";

    export default {
        components: {
            table_list,
            page_header,
            pagination
        },
        data() {

            return {

                content: '权限设置',
                search: {
                    keyword: '',
                    shop: ''
                }, //检索
                shop_list: [], //门店
                table_data: [],
            }
        },
        created() {

            this.select_page()
        },
        methods: {

            select_page() {
                let that = this;
                api_user.list(this.search, function (data) {
                    that.table_data = data
                    console.log(data, '===')
                })
            },
            //修改状态
            change_state(item) {
                let uid = item.id
                let state = item.state;
                let that = this
                api_user.state(state, uid, function (data) {
                    console.log(data)
                    // that.select_page()
                })
            },
            //聚焦弹起键盘
            closeReadOnly(val) {
                this.$nextTick(() => {
                    const input = this.$refs[val].$el.querySelector('.el-input__inner')
                    input.removeAttribute('readonly')
                })
            }

        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/style/manage/user";
    .manage_list {
        //自定义table
        .table_title{
            .item_1th{
                width: 50% !important;
            }
            .item_2th{
                width: 25% !important;
            }
            .item_3th{
                width: 25% !important;
            }
        }
    }

</style>
